<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <style>
        main{
            width: 500px;
            margin: 0 auto;
        }
      img {
        width: 300px;
        height: 300px;
        border-radius: 50%;
      }
      .play {
        animation: xz 10s linear infinite;
      }
      @keyframes xz {
        from {
          transform: rotate(0);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .replay {
        animation: rexz 10s linear infinite;
      }
      @keyframes rexz {
        from {
          transform: rotate(0);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .pause {
        animation-play-state: paused;
      }
      .running {
        animation-play-state: running;
      }
      h1{

      }
      button{
          display: inline-block;
          width: 70px;
          height: 30px;
      }
      i{
          display: inline-block;
          font-size: 16px;
          color: black;
      }
       /* ************* */
       .scroll{
      margin:100px;
      width: 500px;
      height: 15px;
      background: #ccc;
      position: relative;
    }
    .bar{
      width: 10px;
      height: 20px;
      background: #369;
      position: absolute;
      top: -7px;
      left: 0;
      cursor: pointer;
    }
    .mask{
      position: absolute;
      left: 0;
      top: 0;
      background: #369;
      width: 0;
      height: 15px;
    }
    </style>
  </head>
  <body>
      <main>
    <audio></audio>
    <img />
    <h1></h1>
    <button type="button" onclick="play(event)">播放</button>
    <div class="time">
      <div  class="scroll"  onmousedown="sliderdown(event)" onmousemove="slidermove(event)" onmouseup="sliderup(event)">
        <!-- <div class="bar" id="bar"></div> -->
        <div class="mask" id="mask"></div>
      </div>
      <span></span>
    </div>
    <button type="button" onclick="prev()">上一首</button>
    <button type="button" onclick="next()">下一首</button>
    <!-- <div class="button" onclick="prev()"><i class="iconfont icon-ziyuanldpi"></i></div>
    <div class="button" onclick="next()"><i class="iconfont icon-ziyuanldpi1"></i></div> -->
    <div class="volume">
      <progress value="0" max="1"></progress>
      <span></span>
    </div>
    <button type="button" onclick="volumeup()">音量+</button>
    <button type="button" onclick="volumedown()">音量-</button>
</main>

    <script>
      var list = [
        {
          name: "摩天动物园",
          sing: "邓紫棋",
          src: "audio/G.E.M. 邓紫棋 - 摩天动物园.mp3",
          cover: "img/邓紫棋1.png"
        },
        {
          name: "光年之外",
          sing: "邓紫棋",
          src: "audio/G.E.M. 邓紫棋 - 光年之外.mp3",
          cover: "img/邓紫棋2.png"
        }
      ];
      var audio = document.querySelector("audio");
      var h1 = document.querySelector("h1");
      var img = document.querySelector("img");
      var vspan = document.querySelector(".volume span");
      var vprogress = document.querySelector(".volume progress");
      var tspan = document.querySelector(".time span");
      var tprogress = document.querySelector(".time progress");
      var btn = document.querySelector("button");

      var index = 0;

  //   ***********************
  var scroll = document.querySelector('.scroll');
    var bar = document.getElementById('bar');
    var mask = document.getElementById('mask');
    // var ptxt = document.getElementsByTagName('p')[0];
    var barleft = 0;
    var isMove = false;

function sliderdown(ev) {
  isMove=true
  move(ev)
}
function slidermove(ev) {
  if(isMove) move(ev)
  
  
}
function sliderup(ev) {
  isMove=false;
  move(ev)
  
    audio.currentTime = audio.duration*rate;
  
  
}

var scrollreact=scroll.getBoundingClientRect();
var rate;

function move(ev) {
  console.log(ev.pageX);
  var distance = ev.pageX - scrollreact.left;
  // if (distance>barReact.width) {
  //   distance=barReact.width
  // } else if(distance<0){
    
  // }
  distance = distance>scrollreact.width ? scrollreact.width : (distance<0 ? 0 : distance);
  rate = distance/scrollreact.width;
  mask.style.width = 100*rate + "%";
  
  tspan.innerHTML = format(audio.duration*rate) + '/' + format(audio.duration);

}


    audio.ontimeupdate = function() {
        if (audio.duration) {
          tspan.innerHTML = format(audio.currentTime) + "/" + format(audio.duration);
          mask.style.width=100*audio.currentTime/audio.duration+'%'
        }
      };











      function loadAudio() {
        var song = list[index];
        audio.src = song.src;
        h1.innerHTML = song.name + "-" + song.sing;
        img.src = song.cover;
        img.style.transform = "rotate(0)";
      }

      console.dir(audio);
      function play(ev) {
        if (audio.paused) {
          audio.play();
          ev.target.innerHTML = "暂停";
          if (img.classList.contains("play")) {
            img.className = "running play";
          } else {
            img.className = "running replay";
          }
        } else {
          audio.pause();
          ev.target.innerHTML = "播放";
          if (img.classList.contains("play")) {
            img.className = "pause play";
          } else {
            img.className = "pause replay";
          }
        }
      }

      audio.onplay = function() {
        console.log("正在播放");
        btn.innerHTML = "暂停";
      };

      

      function format(n) {
        var time = Math.round(n);
        var minute = Math.floor(time / 60);
        var second = time % 60;
        minute = minute < 10 ? "0" + minute : minute;
        second = second < 10 ? "0" + second : second;
        return minute + ":" + second;
      }

      function resetAnimation() {
        if (img.classList.contains("play")) {
          img.className = "replay";
        } else {
          img.className = "play";
        }
      }

      function prev() {
        index--;
        if (index == -1) {
          index = list.length - 1;
        }
        loadAudio();
        audio.play();
        resetAnimation();
      }
      function next() {
        index++;
        if (index == list.length) {
          index = 0;
        }
        loadAudio();
        audio.play();
        resetAnimation();
      }

      audio.onended = function() {
        next();
      };

      audio.volume = 0.5;
      setVolume();
      function setVolume() {
        vspan.innerHTML = audio.volume.toFixed(2) * 100 + "%";
        vprogress.value = audio.volume;
      }

      audio.onvolumechange = function() {
        setVolume();
      };

      function volumeup() {
        if (audio.volume < 0.9) {
          audio.volume += 0.1;
        }
        console.log(audio.volume);
      }

      function volumedown() {
        if (audio.volume > 0.1) {
          audio.volume -= 0.1;
        }
        console.log(audio.volume);
      }

    </script>
  </body>
</html>
